<template>
  <div class="style-pick">
    <n-color-picker
      v-model:value="color_value"
      :swatches="[
        '#C19A9AFF',
        '#FFF5AEFF',
        '#F3FFAEFF',
        '#C9FFF2FF',
        '#C9D1FFFF',
        '#FBE673FF',
        '#DAC9FFFF',
        '#FFC9FFFF',
        '#FF7C7EAB',
        '#DCEDB3FF',
        '#BFEDB3FF',
        '#B3EDB7FF',
        '#CFEDDDFF',
        '#C2EFECFF',
        '#AFCAE1FF',
        '#BEAFE1FF',
        
        '#DDAFE1FF',
        '#FF005152',
        '#D5D5D554',
        '#EBEBEBFF',
        '#D5D5D5DE',
        '#DDA8A8FF',
        '#C087EBFF',
        '#F5F5F5FF'
      ]"
      @complete="updateColor"
      :placement="'left-start'"
      :default-value="'#F5F5F5FF'"
    />
  </div>
</template>
<script setup lang="ts">
import { ref, watch, onMounted } from 'vue'
import { NColorPicker } from 'naive-ui'
const color_value=ref('#F5F5F5FF')
import { defineEmits } from 'vue'

const emit = defineEmits(['update_style_color'])
watch(color_value,(newVal,oldVal)=>{
    emit('update_style_color',newVal);
})

const updateColor = (color: string) => {
  //console.log('颜色选择完成:', color)
  emit('update_style_color',color_value.value);
}
</script>

<style scoped lang="scss">
.style-pick{
    height:20px;
    width:100%;
}
</style>
